<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 后台大布局 - Layui</title>
  <link rel="stylesheet" href="/static/js/layui/css/layui.css">
  <style>
  .layui-layout-admin .layui-side ,.layui-layout-admin .layui-logo,.layui-nav-tree{
    width: 100px;
}

.layui-side-scroll::-webkit-scrollbar-track-piece {background-color: #f8f8f8}
.layui-side-scroll::-webkit-scrollbar {width: 6px;height: 6px;radius:3px}
.layui-side-scroll::-webkit-scrollbar-thumb {min-height: 28px;background-color: #ddd;background-clip: padding-box;}
.layui-side-scroll::-webkit-scrollbar-thumb:hover {background-color: #bbb}
.layui-side-scroll{width:100px}
.layui-body,.layui-layout-left ,.layui-layout-admin .layui-footer{left:100px;}
.nb-nav-tree .nb-nav-item{
    height: 80px;
}
.layadmin-iframe{position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0;}
.nb-nav-tree .nb-nav-item span{
    display: flex;
    height: 80px;
    text-align: center;
    cursor: pointer;
    align-items: center; /*定义div1的元素垂直居中*/
    justify-content: center; /*定义div1的里的元素水平居中*/
    flex-flow: row wrap;
    
}
.nb-nav-tree .nb-nav-item span i{
    font-size: 25px; 
    height: 25px;
 
}
.nb-nav-tree .nb-nav-item span p{
  width:100%;
    height: 20px;
    line-height: 10px;
}
.nb-nav-item a{color: #fff!important;}
.nb-nav-item a:hover,.nb-nav-tree span:hover,.nb-nav-tree .layui-this{
    color:#1E9FFF;
    background: #444;
}
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">商户管理</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-layout-left">
     
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="{$merchant['avatar']}" class="layui-nav-img" onerror="nopic();">
          {$merchant['username']}
        </a>
      </li>
      <li class="layui-nav-item"><a href="{:url('login/logout')}">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="nb-nav nb-nav-tree"  lay-filter="test">
        <li class="nb-nav-item" data-index=1 data-href="{:url('chart/index')}">
            <span >
                <i class="layui-icon layui-icon-console" ></i> 
                <p>统计</p>
            </span>
        </li>
        <li class="nb-nav-item" data-index=2 data-href="{:url('kfservicelog/index')}">
            <span >
                <i class="layui-icon layui-icon-chart" ></i> 
                <p>日志</p>
            </span>
        </li>
        <li class="nb-nav-item" data-index=3 data-href="{:url('kfuser/index')}">
            <span data-href="">
                <i class="layui-icon layui-icon-user" ></i> 
                <p>客服</p>
            </span>
        </li>
        <li class="nb-nav-item " data-index=4 data-href="{:url('setting/index')}">
            <span data-href="">
                <i class="layui-icon layui-icon-set" ></i> 
                <p>设置</p>
            </span>
        </li>
        <li class="nb-nav-item " >
            <a href="/service.php" target="_blank">
            <span >
                <i class="layui-icon layui-icon-vercode" ></i> 
                <p>工作台</p>
            </span>
          </a>
        </li>
        <li class="nb-nav-item" data-index=5 data-href="{:url('setting/help')}">
            <span >
                <i class="layui-icon layui-icon-help" ></i> 
                <p>帮助</p>
            </span>
        </li>
        
      </ul>
    </div>
  </div>
  
  <!-- 主体内容 -->
  <div class="layui-body" id="LAY_app_body" >
    <div class="layadmin-tabsbody-item layui-show">
      <iframe src="{:url('chart/index')}" frameborder="0" class="layadmin-iframe"></iframe>
    </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © {$version.copyright} - {$version.name} - {$version.version}
  </div>
</div>
{include file="merchant/layout_layui" /}
<script>
//JavaScript代码区域
layui.use(['element','layer'], function(){
    var element = layui.element
        // ,layer = layui.layer
        ,$=layui.$;
    var loadindex;
    //点击导航
    $(document).on('click','.nb-nav-tree li',function(){
        loadindex = layer.load(0, { shade: false });
        $(this).addClass('layui-this').siblings('li').removeClass('layui-this');
        gotoIndex = $(this).data('index');
        layui.data('gotopage',{key:'currIndex',value:gotoIndex})
        gotopage();
    })
    //刷新
    function refresh (){
        loadindex = layer.load(0, { shade: false });
        var iframe = $(document).find('.layadmin-iframe');
        iframe[0].onload = function () {layer.close(loadindex)};
        iframe[0].contentWindow.location.reload(true);
    }
    //记忆
    function gotopage(){
        let nav = layui.data('gotopage');
        let gotoIndex;
        if(nav.currIndex){
            gotoIndex = nav.currIndex;
        }else{
            gotoIndex = $('.nb-nav-tree li:first').data('index');
            layui.data('gotopage',{key:'currIndex',value:gotoIndex})
        }
        var iframe = $(document).find('.layadmin-iframe');
        $('.nb-nav-tree li[data-index='+gotoIndex+']').addClass('layui-this').siblings('li').removeClass('layui-this');
        iframe[0].onload = function () {layer.close(loadindex)};
        iframe[0].contentWindow.location.href = $('.nb-nav-tree li[data-index='+gotoIndex+']').data('href');
    }
    gotopage();
});
</script>
</body>
</html>